<my-header [title]="operateTitle"></my-header>
<div class="operate">
  <form #contactForm="ngForm" (ngSubmit)="submitForm()">
    <ul>
      <li>
        <label>姓名：</label>
        <p>
          <input type="text" value="{{contact.name}}"
          [(ngModel)]="contact.name" name="name"
           (blur)="onBlurName()">
          <i *ngIf="nameTip" [ngClass]="{green: isName, red: !isName}"></i>
        </p>
      </li>
      <li>
        <label>电话：</label>
        <p>
          <input type="text" value="{{contact.telNum}}"
          [(ngModel)]="contact.telNum" name="telNum"
          (blur)="onBlurPhone()">
          <i *ngIf="phoneTip" [ngClass]="{green: isPhoneNum, red: !isPhoneNum}"></i>
        </p>
      </li>
      <li>
        <label>住址：</label>
        <p>
          <input type="text" value="{{contact.address}}"
          [(ngModel)]="contact.address" name="address"
          (blur)="onBlurAddr()">
          <i *ngIf="addrTip" [ngClass]="{green: isAddr, red: !isAddr}"></i>
        </p>
      </li>
      <li>
        <label>邮箱：</label>
        <p>
          <input type="text" value="{{contact.email}}"
          [(ngModel)]="contact.email" name="email"
          (blur)="onBlurEmail()">
          <i *ngIf="emailTie" [ngClass]="{green: isEmail, red: !isEmail}"></i>
        </p>
      </li>
      <li>
        <label>生日：</label>
        <p>
          <input type="text" value="{{contact.birthday}}"
          [(ngModel)]="contact.birthday" name="birthday"
          (blur)="onBlurBir()"  placeholder="日期格式如:1990/10/12">
          <i *ngIf="birTip" [ngClass]="{green: isBir, red: !isBir}"></i>
        </p>
      </li>
    </ul>
    <div class="btn">
      <button type="submit" class="fl" btnClickStyle>保存</button>
      <button (click)="cancleOperate()" class=" fr">取消</button>
    </div>
  </form>
</div>
